<template>
    <section>
        <!--高级查询-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="department">
                <el-form-item>
                    <el-input v-model="department.name" placeholder="部门名称"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="department.state" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="启用" value=1></el-option>
                        <el-option label="禁用" value=0></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="searchDepartment">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="insertSubmit">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--部门列表-->
        <!--
            highlight-current-row属性即可实现单选
            selection-change当选择项发生变化时会触发该事件
        -->
        <el-table :data="departments" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <!--type="selection"选择多行数据-->
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column type="index" align="center" label="序号">
            </el-table-column>
            <el-table-column prop="name" align="center" label="部门名称">
            </el-table-column>
            <el-table-column prop="sn" align="center" label="部门编号">
            </el-table-column>
            <el-table-column prop="manager.username" align="center" label="部门经理">
            </el-table-column>
            <el-table-column prop="parent.name" align="center" label="父级部门">
            </el-table-column>
            <el-table-column prop="state"align="center" label="部门状态" :formatter="formatState">
            </el-table-column>
            <el-table-column label="操作" >
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
        <el-dialog title="修改" :visible.sync="dialogVisible"  width="30%">
            <!--修改弹窗-->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="序号" prop="id" hidden="true">
                    <el-input v-model="ruleForm.id"></el-input>
                </el-form-item>
                <el-form-item label="部门编号" prop="sn">
                    <el-input v-model="ruleForm.sn"></el-input>
                </el-form-item>
                <!--启用状态单选框-->
                <el-form-item label="启用状态" prop="state">
                    <el-radio-group v-model="ruleForm.state">
                        <el-radio class="radio" :label=1>启用</el-radio>
                        <el-radio class="radio" :label=0>禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!--部门下拉框-->
                <el-form-item label="上级部门">
                    <el-select v-model="ruleForm.parentId" placeholder="请选择">
                        <el-option
                                v-for="item in parentDepartments"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门经理">
                    <el-select v-model="ruleForm.managerId" placeholder="请选择">
                        <el-option
                                v-for="item in managerDepartments"
                                :key="item.id"
                                :label="item.username"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">确 定</el-button>
          </span>
        </el-dialog>

    </section>
</template>
<script>
    export default {
        data() {
            return {
                departments:[],
                listLoading:false,
                total:0,
                sels:[],
                pageSize:10,
                currentPage:1,
                parentDepartments:[],
                managerDepartments:[],
                department:{
                    name:"",
                    sn:"",
                    state:""
                },
                dialogVisible:false,
                ruleForm:{
                    id:0,
                    name:"",
                    sn:"",
                    state:1,
                    parentId:"",
                    managerId:""
                },
                rules:{
                    name: [
                        { required: true, message: '请输入部门名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                    ],
                    sn: [
                        { required: true, message: '请选择部门编号', trigger: 'blur' }
                    ]
                },
                addLoading:false
            }
        },
        methods:{
            //多选框选择事件
            selsChange(sels){
                this.sels = sels;
            },
            //编辑事件,index下标,row行对象
            handleEdit(index,row){
               //ruleForm:{
                    /*this.ruleForm.name=row.name,
                    this.ruleForm.sn=row.sn,
                    this.ruleForm.state=row.state,
                    this.ruleForm.id = row.id*/
                    for (var k in row){
                        this.ruleForm[k] = row[k];
                    }
                    //判断parent是否为空
                    if(this.ruleForm.parent){
                        this.ruleForm.parentId=this.ruleForm.parent.id
                    }else {
                        this.ruleForm.parentId="";
                    };
                    //判断manager是否为空
                    if(this.ruleForm.manager){
                        this.ruleForm.managerId=this.ruleForm.manager.id
                    }else {
                        this.ruleForm.managerId="";
                    };

                //}
                this.dialogVisible = true;

            },
            //删除
            handleDel(index,row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("http://localhost/department/"+row.id).then((res=>{
                        console.debug("###################",res);
                        if(res.data.success){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.loadDepartment();
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    }));
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除
            batchRemove(){
                console.debug("555555555555555555",this.sels);
                //let ids = this.sels.id
                var ids = this.sels.map(item => item.id)
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.patch("http://localhost/department/deleteAll",ids).then((res=>{
                        console.debug("###################",res);
                        if(res.data.success){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.loadDepartment();
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    }));
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //当前页码改变绑定事件
            handleCurrentChange(val){
                console.debug("11111111111",val)
                this.currentPage=val;
                this.loadDepartment();
            },
            formatState(row, column){
                console.debug("----------------",row);
                return row.state==1?"启用":"禁用"
            },
            loadDepartment(){
                let param = {"currentPage":this.currentPage,"pageSize":this.pageSize,"name":this.department.name,"sn":this.department.sn,"state":this.department.state}
                this.$http.patch("http://localhost/department",param).then((result=>{
                    console.debug("!!!!!!!!!!!!!!!!!",result);
                    this.departments = result.data.data;
                    this.total = result.data.total;
                }));
            },
            //获取所有部门作为查询，作为上级部门
            loadAllDepartment(){
                this.$http.patch("http://localhost/department/findAll").then((result=>{
                    console.debug("////////////////////",result);
                    this.parentDepartments = result.data;
                }));
            },
            loadAllEmployee(){
                this.$http.patch("http://localhost/employee/loadAll").then((result=>{
                    console.debug("KKKKKKKKKKKKKKKKKKK",result);
                    this.managerDepartments = result.data;
                }));
            },
            //高级查询
            searchDepartment(){
                this.loadDepartment();
            },
            //弹窗确定
            addSubmit(){
                this.$refs["ruleForm"].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            let param = this.ruleForm;
                            console.debug("uuuuuuuuuuuuu",param);
                            let parent = {
                                id:param.parentId,
                            };
                            param.parent=parent;
                            let manager = {
                                id:param.managerId,
                            };
                            param.manager=manager;
                            console.debug("vvvvvvvvvvvvvv",param)
                            //编辑确定
                            if (param.id) {
                                this.$http.post("http://localhost/department",param).then((result => {
                                    console.debug("888888888888", result);
                                    if (result.data.success) {
                                        this.$message({
                                            type: 'success',
                                            message: '修改成功!'
                                        });
                                        this.loadDepartment();
                                    } else {
                                        this.$message.error(result.data.msg);
                                    }
                                    this.dialogVisible = false;
                                }));
                            } else {
                                //编辑确定事件
                                this.$http.put("http://localhost/department", param).then((result => {
                                    console.debug("9999999999999", result);
                                    if (result.data.success) {
                                        this.$message({
                                            type: 'success',
                                            message: '增加成功!'
                                        });
                                        this.loadDepartment();
                                    } else {
                                        this.$message.error(result.data.msg);
                                    }
                                    this.dialogVisible = false;
                                }));
                            }
                        })
                    }
                })
            },
            insertSubmit(index,row){
                this.dialogVisible = true;

                    /*this.ruleForm.id=null,
                    this.ruleForm.name="",
                    this.ruleForm.sn="",
                    this.ruleForm.state=1*/
                    for(var i in this.ruleForm){
                        this.ruleForm[i] = null;
                    }
                    this.ruleForm.state = 1;

            }
        },
        mounted(){
           this.loadDepartment();
           this.loadAllDepartment();
           this.loadAllEmployee();
        }
    }
</script>